//line-chart.vue
<template>
  <div class="app-container">

    <el-main>
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="项目" prop="itemName">
          <el-select v-model="queryParams.itemId" placeholder="请选择项目" @change="itemChange" clearable
                     size="small" multiple>
            <el-option
              v-for="dict in itemList"
              :key="dict.id+''"
              :label="dict.name"
              :value="dict.id"
            />
          </el-select>

        </el-form-item>

        <el-form-item label="类目">
          <el-cascader v-model="queryParams.fList" :options="fieldList" :props="fields" :style="{width: '100%'}"
                       :show-all-levels="false" placeholder="请选择类目" clearable>
          </el-cascader>
        </el-form-item>

        <el-form-item label="时间" :style="{width: '250px'}">
          <el-select v-model="queryParams.year" placeholder="年" :style="{width: '80px'}">
            <el-option
              v-for="dict in dict.type.year_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
          <el-select v-model="queryParams.month" placeholder="月" :style="{width: '80px'}" style="margin-left: 5px;"
                     multiple>
            <el-option
              v-for="dict in dict.type.month_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">生成图表</el-button>
        </el-form-item>
      </el-form>
    </el-main>
    <el-container style="height: 500px; border: 1px solid #eee; ">
      <div id="echartContainer" ref="chart" style="margin-top: 20px;height: 500px;width:100%"></div>
    </el-container>
    <el-container style="height: 500px; border: 1px solid #eee; ">
      <div id="lineContainer" ref="lineChart" style="margin-top: 20px;height: 500px;width:100%"></div>
    </el-container>
    <el-container style="height: 500px; border: 1px solid #eee; ">
      <div id="pieContainer" ref="pieChart" style="margin-top: 20px;height: 500px;width:100%"></div>
    </el-container>
  </div>
</template>
<script>
import {getItemList} from "@/api/feesys/feeinfo";
import {getReportLine, fieldList} from "@/api/report/itemReport";

const echarts = require('echarts');
export default {
  name: 'line-chart',
  dicts: ['year_type', "month_type"],
  data() {
    return {
      LINE_DATA: {},
      fieldList: [],
      itemList: [],

      // 查询参数
      queryParams: {
        fieldList: [],
        fList: [],
        itemId: null,
        fieldName: null,
        itemName: null,
        year: null,
        month: null

      },
      fields: {
        "multiple": true,
        "value": "name",
        "label": "name"
      },
      rules: {
        itemName: [{
          required: true,
          message: '请选择项目',
          trigger: 'change'
        }],
      }


    }
  },
  created() {
    this.getItemList();
    this.getFieldList();
  },
  methods: {
    //同一项目不同分类不同时段统计图
    drawLine(LINE_DATA) {
      var bar_dv = this.$refs.chart;
      if (bar_dv) {
        // const LINE_DATA = this.LINE_DATA;
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(bar_dv)

        // 绘制图表
        var option = {
          title: {
            text: '不同分类不同时段对比'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: LINE_DATA.cateData
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              // prettier-ignore
              align: 'center',
              data: LINE_DATA.xAxisData
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: LINE_DATA.series
        };
        myChart.setOption(option, true);
      }

    },

    //同一项目下不同分类不同时段统计图
    zheLine(LINE_DATA) {
      var bar_dv = this.$refs.lineChart;
      if (bar_dv) {


        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(bar_dv)
        // 绘制图表
        myChart.setOption({
          title: {
            text: '不同时段不同分类对比'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: LINE_DATA.cateData
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} '
            }
          },
          series: LINE_DATA.series
        }, true);
      }
    },
    //同一项目下不同分类不同时段统计图
    pieLine(LINE_DATA) {
      var bar_dv = this.$refs.pieChart;
      if (bar_dv) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(bar_dv)
        // 绘制图表
        myChart.setOption({
          title: LINE_DATA.title,
          label: {
            alignTo: 'edge',
            formatter: '{name|{b}}\n{time|{c} }',
            minMargin: 5,
            edgeDistance: 10,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 10,
                color: '#999'
              }
            }
          },
          series: LINE_DATA.series
        }, true);
      }
    },

    getItemList() {
      getItemList().then(response => {
        this.itemList = response.data;
      })
    },
    //获取字段类目
    getFieldList() {
      fieldList().then(Response => {
        const fieldNewList = new Map(Object.entries(Response));
        var fieldList = new Array();
        fieldNewList.forEach(function (v, k) {
          var obj = {}
          obj.cName = ""
          obj.name = k
          obj.field = ""
          fieldList.push(obj)
          for (let i = 0; i < v.length; i++) {
            var s = v[i].split(",");
            var o = {}
            o.cName = s[0]
            o.name = s[1]
            o.field = s[2]
            fieldList.push(o)
          }
        })
        this.fieldList = this.handleTree(fieldList, "name", "cName");
      })
    },
    //改变项目
    itemChange(itemId) {
      if (itemId) {
      }
    },
    /** 搜索 */
    handleQuery() {

      var fromObj = this.queryParams;
      if (null == fromObj.itemId || '' == fromObj.itemId) {
        this.$modal.msgError("请选择项目")
        return false;
      }
      if (null == fromObj.fList || 1 > fromObj.fList.length) {
        this.$modal.msgError("请选择类目")
        return false;
      }
      if (null == fromObj.year || "" == fromObj.year) {
        this.$modal.msgError("请选择年")
        return false;
      }
      if (null == fromObj.month || 1 > fromObj.month.length) {
        this.$modal.msgError("请选择月")
        return false;
      }
      var fieldList1 = fromObj.fList;
      var fieldList = new Array();
      for (let i = 0; i < fieldList1.length; i++) {
        fieldList.push(fieldList1[i][1])
      }
      fromObj.fieldList = fieldList
      getReportLine(fromObj).then(Response => {
        var LINE_DATA = {};

        var list = Response.data.list;
        var cateData = []
        var series = []
        for (var key in list) {
          cateData.push(key)
          var obj = {
            name: key,
            type: 'bar',
            data: list[key],
            label: {
              show: true,
              position: 'inside'
            },
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
            markLine: {
              data: [{type: 'average', name: 'Avg'}]
            }
          }
          series.push(obj);
        }

        LINE_DATA.cateData = cateData
        LINE_DATA.xAxisData = fieldList
        LINE_DATA.series = series
        this.drawLine(LINE_DATA)

        var zList = Response.data.zList
        series = []
        for (let zKey in zList) {
          var obj = {
            name: zKey,
            type: 'line',
            data: zList[zKey],
            markPoint: {
              data: [
                {type: 'max', name: 'Max'},
                {type: 'min', name: 'Min'}
              ]
            },
          }
          series.push(obj)
        }
        LINE_DATA.cateData = Response.data.monthList
        LINE_DATA.series = series
        this.zheLine(LINE_DATA)


        series = []

        for (let i = 0; i < cateData.length; i++) {
          if (3 == i) {
            break;
          }
          var dList = []
          var l = []
          for (let zKey in zList) {
            var dObj = {
              name: zKey,
              value: zList[zKey][i]
            }
            dList.push(dObj)
          }
          var left = 0
          var right = '66.6667%'
          if (1 == i) {
            left = "33.3333%"
            right = '33.3333%'
          } else if (2 == i) {
            left = '66.6667%'
            right = '0'
          }
          var obj = {
            type: 'pie',
            radius: '25%',
            center: ['50%', '50%'],
            data: dList,
            label: {
              position: 'outer',
              alignTo: 'none',
              bleedMargin: 5
            },
            left: left,
            right: right,
            top: 0,
            bottom: 0
          }
          series.push(obj)
        }

        LINE_DATA.series = series

        var title = [{
          text: '不同月份类目分布',
          left: 'center'
        }]
        let mL = Response.data.monthList
        for (let i = 0; i < mL.length; i++) {
          if (3 == i) {
            break;
          }
          var left = "16.67%"
          if (i == 1) {
            left = "50%"
          } else if (i == 2) {
            left = "83.33%"
          }
          var tObj = {
            subtext: mL[i],
            left: left,
            top: '75%',
            textAlign: 'center'
          }
          title.push(tObj)
        }

        LINE_DATA.title = title
        this.pieLine(LINE_DATA)
      })


    }
  }
}
</script>

<style scoped>

</style>

